<template>
	<view>
		<view class="condview">
			<view class="getNumbox" :class="" @click="getNum" v-show="isShow">
				{{getTxt}}
			</view>
			<view class="num" v-show="!isShow">
				({{countDownTime}})秒后重发
			</view>
		</view>
		<uni-popup ref="propVerify"  mask-background-color="rgba(0,0,0,0.6)">
			<view class="prop_box">
				<view class="prop_box_title">
					<view class="pb_word">请完成安全验证</view>
					<view class="close_box" @click="closeVerify">
						<uni-icons type="closeempty" size="34rpx" color="#999999" ></uni-icons>
					</view>
				</view>
				<cc-slide-verify ref="ccSlideVerify" @success="verifySuccess" :slideWidth='580' :slideHeight='80'></cc-slide-verify>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "verification-code",
		props: {
			seconds: {
				type: Number,
				value: 60
			},
			phone:{
				type: String,
				value: '',
			},
			value:{
				type: Boolean,
				value: false,
			},
		},
		data() {
			return {
				getTxt: '获取验证码',
				countDownTime: 60,
				isShow: true,
				localStatus: this.value, //是否勾选
				time:'',
				isVerify:false,//是否验证
			};
		},
		created() {
			// console.log('uni.getStorageSync(key)',uni.getStorageSync('loginSendTime'))
			var sendTime = uni.getStorageSync('loginSendTime')
			var newDateTime = Math.ceil((sendTime - new Date().getTime()) / 1000)
			if(newDateTime <= 60 && newDateTime > 0){
				this.codeCountDown(sendTime)
				this.$emit('openAgreeWith',2)
			}
		},
		mounted() {
			// this.$refs.propVerify.open()
		},
		methods: {
			// 验证成功 
			verifySuccess(){
				this.isVerify = true
				this.$refs.propVerify.close()
				this.getNum()
			},
			// 关闭弹窗
			closeVerify(){
				this.$refs.propVerify.close()
			},
			getNum: function() {
				if(this.phone=='' ){
					uni.showToast({
						title:'手机号不能为空！',
						icon:'none'
					})
					return
				} else if(this.localStatus == false){
					this.$emit('openAgreeWith',1)
					return
				}
				else if(this.isVerify == false){
					this.$refs.propVerify.open()
					this.$refs.ccSlideVerify.initializedData() //初始化数据
					return
				}
				 //开启倒计时
				let endMsRes = new Date().getTime() + 60000; //当前时间戳加上一分钟的时间戳，相当于当前时间一分钟以后的时间戳
				uni.setStorageSync("loginSendTime",JSON.stringify(endMsRes)) // 把这个一分钟时候的事件戳存起来
				this.codeCountDown(endMsRes); // 调用封装的方法，传入当前60秒时间
				this.$emit('start')
			},
			//获取短信验证码
			codeCountDown(endMsRes) {
			  this.isShow = false;
			  this.countDownTime = Math.ceil((endMsRes - new Date().getTime()) / 1000); //剩余多少秒
			  this.time = setTimeout(() => {
				 this.countDownTime--;
				if (this.countDownTime < 1) {
				  this.isShow = true
				  this.isVerify = false
				  this.countDownTime = 60;
				  uni.removeStorageSync("loginSendTime")
				  this.getTxt = '获取验证码'
				  this.$emit('end')
				  clearTimeout(this.time);
				} else {
				  this.codeCountDown(endMsRes);
				}
			 }, 1000);
		   },
			// 改变状态
			changeStatus(localStatus){
				this.localStatus = localStatus
				this.getNum()
			},
			
		},
		watch:{
			'value': {
				handler(newVal, oldVal) {
					this.localStatus = newVal
				},
				deep: true,
				immediate: true
			 }
		}
	}
</script>

<style>
	.condview {
		width: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 34rpx;
		line-height: 48rpx;
		color: #FF4743;
	}
	.prop_box{
		width: 650rpx;
		padding: 40rpx 40rpx 100rpx 40rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		background-color: #ffffff;
	}
	.prop_box_title{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 62rpx;
	}
	.pb_word{
		color: #222222;
		font-size: 34rpx;
		font-weight: bold;
	}
	.close_box{
		width: 44rpx;
		height: 44rpx;
	}
	.num{
		color: #ACAEB9;
	}
</style>
